<template>
  <a-spin :spinning="loading">
    <!-- 标题 -->
    <div class="modal-header">
      <div class="modal-title">
        <span v-if="pageDataList">{{ l('AuditLogDetail') }}</span>
      </div>
    </div>
    <slot></slot>
    <!-- 用户信息 -->
    <div class="modal-body">
      <h3>{{ l('UserInformations') }}</h3>
      <!-- 用户名 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('UserName') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.userName }}</div>
        </a-col>
      </a-row>
      <!-- IP地址 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('IpAddress') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.clientIpAddress }}</div>
        </a-col>
      </a-row>
      <!-- 客户端 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Client') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.clientName }}</div>
        </a-col>
      </a-row>
      <!-- 浏览器 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Browser') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.browserInfo }}</div>
        </a-col>
      </a-row>

      <!-- 操作信息 -->
      <br />
      <h3>{{ l('ActionInformations') }}</h3>
      <!-- 服务 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Service') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.serviceName }}</div>
        </a-col>
      </a-row>
      <!-- 操作 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Action') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.methodName }}</div>
        </a-col>
      </a-row>
      <!-- 时间 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Time') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ getExecutionTime() }}</div>
        </a-col>
      </a-row>
      <!-- 持续时间 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Duration') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.executionDuration }}ms</div>
        </a-col>
      </a-row>
      <!-- 参数 -->
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('Parameters') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.parameters }}</div>
        </a-col>
      </a-row>

      <!-- 数据 -->
      <br />
      <h3>{{ l('CustomData') }}</h3>
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">{{ l('None') }}:</div>
        </a-col>
        <a-col class="gutter-row" :span="10">
          <div class="gutter-box">{{ pageDataList?.customData }}</div>
        </a-col>
      </a-row>

      <!-- 错误状态 -->
      <br />
      <h3>{{ l('ErrorState') }}</h3>
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="4">
          <p v-if="!pageDataList?.exception"> <a-badge status="success" />{{ l('Success') }}</p>
          <p v-if="pageDataList?.exception"> <a-badge status="error" />{{ l('Error') }}</p>
        </a-col>
        <a-col class="gutter-row" :span="20">
          <pre class="gutter-box" v-if="pageDataList?.exception">{{ pageDataList?.exception }}</pre>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { AuditLogListDto } from '/@/shared/service-proxies/service-proxies';

  export default defineComponent({
    name: 'audit-logs-detail',
    components: {},
    mixins: [ModalComponentBase],
    props: {
      pageDataList: AuditLogListDto,
    },
    data() {
      return {
        item: null,
      };
    },
    mounted() {
      console.log(this.pageDataList);
    },
    methods: {
      getPageData(data) {
        console.log(data);
      },
      // 时间
      getExecutionTime() {
        if (this.pageDataList && this.pageDataList.executionTime) {
          return (
            this._momentFromNow(this.pageDataList?.executionTime) +
            ' (' +
            this._moment(this.pageDataList?.executionTime) +
            ')'
          );
        }
      },
    },
  });
</script>
